@extends('admin.layouts.app')

@section('title', '仪表板')

@section('content')
<div class="container-fluid">
    <!-- 统计卡片 -->
    <div class="row g-4 mb-4 mt-3">
        <div class="col-lg-4 col-md-6">
            <div class="card stats-card h-100">
                <div class="card-header bg-primary text-white">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <i class="fas fa-users fs-4 mb-2"></i>
                            <h6 class="mb-0 text-uppercase fw-bold letter-spacing">用户总数</h6>
                        </div>
                        <div class="text-end">
                            <h2 class="fw-bold mb-0">{{ $stats['users_count'] }}</h2>
                            <small class="opacity-75">系统用户</small>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center text-muted">
                        <i class="fas fa-chart-line text-success me-2"></i>
                        <small>活跃用户管理</small>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4 col-md-6">
            <div class="card stats-card h-100">
                <div class="card-header bg-success text-white">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <i class="fas fa-user-tag fs-4 mb-2"></i>
                            <h6 class="mb-0 text-uppercase fw-bold letter-spacing">角色总数</h6>
                        </div>
                        <div class="text-end">
                            <h2 class="fw-bold mb-0">{{ $stats['roles_count'] }}</h2>
                            <small class="opacity-75">权限角色</small>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center text-muted">
                        <i class="fas fa-shield-alt text-info me-2"></i>
                        <small>权限控制</small>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4 col-md-6">
            <div class="card stats-card h-100">
                <div class="card-header bg-info text-white">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <i class="fas fa-key fs-4 mb-2"></i>
                            <h6 class="mb-0 text-uppercase fw-bold letter-spacing">权限总数</h6>
                        </div>
                        <div class="text-end">
                            <h2 class="fw-bold mb-0">{{ $stats['permissions_count'] }}</h2>
                            <small class="opacity-75">系统权限</small>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center text-muted">
                        <i class="fas fa-lock text-warning me-2"></i>
                        <small>安全管理</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 主要内容区域 - 自适应布局 -->
    <div class="row g-4">
        <!-- 左侧 - 欢迎信息和功能特性 -->
        <div class="col-xxl-8 col-xl-7 col-lg-8 col-md-12">
            <div class="card border-0 shadow-lg h-100">
                <div class="card-header bg-white border-0 py-4">
                    <div class="d-flex align-items-center">
                        <div class="avatar-wrapper me-3">
                            <div class="avatar bg-primary text-white d-flex align-items-center justify-content-center rounded-circle" style="width: 60px; height: 60px;">
                                <i class="fas fa-crown fs-4"></i>
                            </div>
                        </div>
                        <div>
                            <h4 class="fw-bold text-dark mb-1">欢迎使用权限管理系统</h4>
                            <p class="text-muted mb-0">基于 Laravel + Spatie Permission + SQLite 构建的现代化管理系统</p>
                        </div>
                    </div>
                </div>
                <div class="card-body p-4">
                    <h5 class="fw-bold text-dark mb-4">
                        <i class="fas fa-star text-warning me-2"></i>
                        功能特性
                    </h5>
                    <div class="row">
                        <div class="col-xl-6 col-lg-12 col-md-6">
                            <div class="feature-list">
                                <div class="feature-item d-flex align-items-start mb-4">
                                    <div class="feature-icon bg-primary bg-opacity-10 text-primary rounded p-2 me-3">
                                        <i class="fas fa-users-cog"></i>
                                    </div>
                                    <div>
                                        <h6 class="fw-semibold mb-1">用户管理</h6>
                                        <p class="text-muted small mb-0">完整的用户创建、编辑、删除功能</p>
                                    </div>
                                </div>
                                <div class="feature-item d-flex align-items-start mb-4">
                                    <div class="feature-icon bg-success bg-opacity-10 text-success rounded p-2 me-3">
                                        <i class="fas fa-user-shield"></i>
                                    </div>
                                    <div>
                                        <h6 class="fw-semibold mb-1">角色管理</h6>
                                        <p class="text-muted small mb-0">灵活的角色创建和权限分配</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-6 col-lg-12 col-md-6">
                            <div class="feature-list">
                                <div class="feature-item d-flex align-items-start mb-4">
                                    <div class="feature-icon bg-info bg-opacity-10 text-info rounded p-2 me-3">
                                        <i class="fas fa-key"></i>
                                    </div>
                                    <div>
                                        <h6 class="fw-semibold mb-1">权限控制</h6>
                                        <p class="text-muted small mb-0">精细化的权限控制和访问管理</p>
                                    </div>
                                </div>
                                <div class="feature-item d-flex align-items-start mb-4">
                                    <div class="feature-icon bg-warning bg-opacity-10 text-warning rounded p-2 me-3">
                                        <i class="fas fa-building"></i>
                                    </div>
                                    <div>
                                        <h6 class="fw-semibold mb-1">组织架构</h6>
                                        <p class="text-muted small mb-0">多层级组织结构管理</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 系统信息 -->
                    <div class="mt-4 p-3 bg-light rounded-3">
                        <h6 class="fw-bold mb-3">
                            <i class="fas fa-info-circle text-primary me-2"></i>
                            系统信息
                        </h6>
                        <div class="row">
                            <div class="col-6">
                                <small class="text-muted d-block">Laravel 版本</small>
                                <strong>12.x</strong>
                            </div>
                            <div class="col-6">
                                <small class="text-muted d-block">权限系统</small>
                                <strong>Spatie Permission</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 右侧 - 测试账户信息 -->
        <div class="col-xxl-4 col-xl-5 col-lg-4 col-md-12">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 py-3">
                    <h5 class="fw-bold mb-0">
                        <i class="fas fa-user-circle text-info me-2"></i>
                        测试账户
                    </h5>
                </div>
                <div class="card-body">
                    <div class="account-cards">
                        <div class="account-card bg-light rounded-3 p-3 mb-3">
                            <div class="d-flex align-items-center">
                                <div class="badge bg-danger me-3" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%;">
                                    <i class="fas fa-crown"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="fw-bold mb-1">管理员账户</h6>
                                    <div class="text-muted small">
                                        <div><strong>邮箱:</strong> admin@example.com</div>
                                        <div><strong>密码:</strong> password</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="account-card bg-light rounded-3 p-3 mb-3">
                            <div class="d-flex align-items-center">
                                <div class="badge bg-warning me-3" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%;">
                                    <i class="fas fa-edit"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="fw-bold mb-1">编辑者账户</h6>
                                    <div class="text-muted small">
                                        <div><strong>邮箱:</strong> editor@example.com</div>
                                        <div><strong>密码:</strong> password</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="account-card bg-light rounded-3 p-3 mb-4">
                            <div class="d-flex align-items-center">
                                <div class="badge bg-secondary me-3" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%;">
                                    <i class="fas fa-user"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="fw-bold mb-1">普通用户</h6>
                                    <div class="text-muted small">
                                        <div><strong>邮箱:</strong> user@example.com</div>
                                        <div><strong>密码:</strong> password</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 安全提示 -->
                    <div class="alert alert-warning alert-sm" style="border-left: 4px solid #f59e0b; background: linear-gradient(135deg, #fef3cd, #fde68a);">
                        <div class="d-flex align-items-start">
                            <i class="fas fa-exclamation-triangle text-warning me-2 mt-1"></i>
                            <div>
                                <strong class="small">安全提示</strong>
                                <p class="small mb-0 text-muted">测试账户仅用于演示，生产环境请修改默认密码</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 快速操作面板 -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 py-3">
                    <h5 class="fw-bold mb-0">
                        <i class="fas fa-bolt text-primary me-2"></i>
                        快速操作
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        @can('create-users')
                        <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-6">
                            <a href="{{ route('admin.users.create') }}" class="btn btn-outline-primary w-100 py-3 text-decoration-none">
                                <i class="fas fa-user-plus fs-4 d-block mb-2"></i>
                                <span class="fw-semibold">创建用户</span>
                            </a>
                        </div>
                        @endcan
                        
                        @can('create-roles')
                        <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-6">
                            <a href="{{ route('admin.roles.create') }}" class="btn btn-outline-success w-100 py-3 text-decoration-none">
                                <i class="fas fa-user-tag fs-4 d-block mb-2"></i>
                                <span class="fw-semibold">创建角色</span>
                            </a>
                        </div>
                        @endcan
                        
                        @can('view-users')
                        <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-6">
                            <a href="{{ route('admin.users.index') }}" class="btn btn-outline-info w-100 py-3 text-decoration-none">
                                <i class="fas fa-list fs-4 d-block mb-2"></i>
                                <span class="fw-semibold">用户列表</span>
                            </a>
                        </div>
                        @endcan
                        
                        @can('view-organizations')
                        <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-6">
                            <a href="{{ route('admin.organizations.index') }}" class="btn btn-outline-warning w-100 py-3 text-decoration-none">
                                <i class="fas fa-building fs-4 d-block mb-2"></i>
                                <span class="fw-semibold">组织管理</span>
                            </a>
                        </div>
                        @endcan
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .letter-spacing {
        letter-spacing: 0.05em;
    }
    
    .feature-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
    }
    
    .account-card {
        transition: all 0.2s ease;
        border: 1px solid transparent;
    }
    
    .account-card:hover {
        border-color: var(--bs-primary);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .stats-card .card-header {
        position: relative;
        overflow: hidden;
    }
    
    .stats-card .card-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
        transform: translateX(-100%);
        transition: transform 0.6s ease;
    }
    
    .stats-card:hover .card-header::before {
        transform: translateX(100%);
    }
    
    .alert-sm {
        padding: 0.75rem;
        font-size: 0.875rem;
    }
    
    /* 响应式优化 */
    @media (max-width: 992px) {
        .feature-list .col-md-6 {
            margin-bottom: 1rem;
        }
    }
</style>
@endsection